<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>首页</title>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <!-- Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript">
        <!--分页列表展示-->
        let pageFun = function(pageNum, pageSize){
            $.get("/student/findByPage?pageNum="+pageNum+"&pageSize="+pageSize, function (data) {
                let studentList = data.list;
                if (studentList) {
                    let studentInfo = "";
                    for (let i = 0; i < studentList.length; i++) {
                        let student = studentList[i];
                        studentInfo += `<tr>
                                            <td><input type="checkbox" name="id" value="${student.id}"></td>
                                            <td>${student.id}</td>
                                            <td>${student.name}</td>
                                            <td>${student.password}</td>
                                            <td>${student.age}</td>
                                            <td>${student.sex}</td>
                                            <td>${student.birthday}</td>
                                            <td>${student.address}</td>
                                             <td><a class="btn btn-primary" href="/edit.html?id=${student.id}">修改</a></td>
                                        </tr>`;
                    }
                    $("#student_dis").html(studentInfo);
                    let pageInfo = "";
                    if (!data.isFirstPage){
                        pageInfo += `<li>
                                        <a onclick="pageFun(${pageNum-1},${pageSize})" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                   `;
                    }
                  /*  let start=1;
                    let end = data.pages;
                    if (pageNum+4<=end){
                        end = pageNum+4;
                    }
                    if (pageNum-5>=start){
                        start = pageNum-5;
                    }*/

                    //计算开始页与结束页
                    let begin = pageNum-5;
                    let end = pageNum+4;
                    //小于10页则最后填满10页
                    if (end<=10){
                        end = 10;
                    }
                    //大于总页数则将总数赋给最后一页
                    if (end>data.pages){
                        end = data.pages;
                        //开始页为结束页-9
                        begin = end-9;
                    }
                    //开始页小于1 ，赋值1
                    if (begin<1){
                        begin = 1;
                    }
                    //遍历
                    for (let i = begin; i <= end; i++) {
                        if (i==data.pageNum){
                            pageInfo += `<li class="active" onclick="pageFun(${i},${pageSize})"><a>${i}</a></li>`;
                        } else{
                            pageInfo += `<li onclick="pageFun(${i},${pageSize})"><a>${i}</a></li>`;
                        }
                    }
                    if (!data.isLastPage){
                        pageInfo+=`<li>
                                    <a onclick="pageFun(${data.nextPage},${pageSize})" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>`;
                    }

                    $("#page").html(pageInfo);
                }
            });
        };

        $(function () {
            //首次加载
            pageFun(1,5);
            //显示条数改变
            $("#pageSize").change(function(){
                    pageFun(1,$("#pageSize").val())

                }
            );

            $("#form").submit(function () {
                $.post("/student/del",$(this).serialize(),function (data) {
                    alert("成功删除"+data+"条记录！")
                    location.reload();
                });
                return false;
            });
        });
    </script>
</head>
<body>
<div class="col-md-8 col-center text-center">
    <h2>学生管理系统</h2>
    <center>
        <form action="/student/del" method="post" id="form">
            <table class="table">
                <thead>
                <tr>
                    <th><input type="checkbox" id="firstCheck"></th>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>生日</th>
                    <th>地址</th>
                </tr>
                </thead>
                <tbody id="student_dis">
                <tr>
                    <td><input type="checkbox" name="id" value=""></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td>
                        <button onclick="javascript:'location.href=\'/edit.html?id=1\''">增加</button>
                    </td>
                </tr>
                </tbody>
            </table>
            <br>
            <input type="submit" class="btn btn-info" value="删除选中" />
            <a href="/add.html" class="btn btn-warning">增加</a>
        </form>
        <!--<a href="" class="btn-warning" onclick="javascript:location.href='/add.html'">增加</a>-->
    <div class="row">
        <nav>
            <ul class="pagination" id="page">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        每页显示
        <select name="pageSize" id="pageSize">
            <option value="5" selected="selected">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
        </select>
        条
    </div>
    </center>
</div>
</body>
</html>